<template>
	<div class="header">
		<div class="logo">
			<img src="" alt="" class="logoImg">
			<p class="name"></p>
		</div>

		<el-form class="search" size="mini">
			<el-input v-model="searchKey" size="mini" style="width: 66%;"></el-input>
			<el-button size="mini" type="success" @click.prevent="search()">搜索</el-button>
		</el-form>
		<div class="other"></div>
		<div class="user-center">
			<p class="icon"><i class="fa fa-2x fa-user"></i></p>
			<div class="user-info">
				11111
			</div>
		</div>
		<div class="login-box">
			<el-button type="text">登录</el-button>
			<el-button type="text">注册</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'Header',
		props: {
			msg: String
		},
		data() {
			return {
				msg1: '1111',
				searchKey: ''
			}
		},
		methods: {
			search() {}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.header {
		position: fixed;
		background-color: #f1f1f1;
		display: flex;
		z-index: 999;
		width: 100%;
		height: 50px;

		.logo {
			flex: 1;
		}

		//搜索
		.search {
			flex: 2;
			height: 100%;
			line-height: 50px;

			& * {
				margin-left: 5px;
			}
		}
		.other{
			flex: 2;
			@media screen and(max-width:750px){
				flex: 1;
			}
		}
		.user-center{
			padding-left: 50px;
			flex: 1;
			display: flex;
			justify-content:initial;
			.icon{
				
				i{
					color: #A6A9AD;
					
					height: 50px;
					line-height: 50px;
					&:hover{
						color: #00BFFF;
					}
				}
				
			}
			.user-info{
				flex: 1;
				position: relative;
				.menu{
					position: absolute;
					top:50px;
				}
			}
			
		}
		.login-box{
			flex: 1;
			&>*{
				height: 50px;
				color: #A6A9AD;
				&:hover{
					color: #00BFFF;
				}
			}
		}

	}
</style>
